<template>
  <section>
    <el-row>
      <el-input style="width: 20%" size="mini" v-model="searchKey" placeholder="输入关键词" @keydown.native.prevent.enter="searchBtn"></el-input>
      <i class="el-icon-search"  @click="searchBtn"></i>
    </el-row>
    <el-table :data="shareList">
      <el-table-column type="index" label="序号"/>
      <el-table-column prop="memberName" label="分享内容">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="4" >
              {{typeList.find(type=>type.val === scope.row.contentType).name}}
            </el-col>
            <el-col :span="14">
              {{scope.row.data.content.title}}
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="memberName" label="分享者"/>
      <el-table-column label="查看">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="lookAccessBtn(scope.row)">访问记录</el-button>
        </template>
      </el-table-column>
      <el-table-column label="预览">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="previewBtn(scope.row)">预分享图</el-button>
          <el-button size="mini" type="text" @click="qrCodeBtn(scope.row)">小程序码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "activityShare",
    components:{},
    props: ['department'],
    data() {
      return {
        shareList:null,
        totalPage:0,
        searchKey:null,
        typeList:[
          {name:'商品',code:'goods',val:2},
          {name:'活动',code:'activity',val:1}
        ]
      }
    },
    created(){
      this.getShareList()
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      searchBtn(){
        this.getShareList(0,this.searchKey)
      },
      goPage(val){
        this.getShareList(val-1)
      },
      getShareList(pageNo,key){
        this.fetch({name:"getShareList",data:{page:pageNo?pageNo:0,key:key?key:''}})
          .then(res=>{
            console.log(res)
            this.shareList=res.content
            this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      previewBtn(row){
        console.log(row)
        let str='<!DOCTYPE html><html><body ><img src="'+row.data.wxaCodeUrl+'" style="width: 30%;height: 30%;" /></body></html>'
        let a=window.open("")
        a.document.write(str)
      },
      qrCodeBtn(row){
        console.log(row)
        let str='<!DOCTYPE html><html><body ><img src="'+row.data.simpleWxaCodeUrl+'" style="width: 30%;height: 30%;" /></body></html>'
        let a=window.open("")
        a.document.write(str)
      },
      lookAccessBtn(row){

      }
    }
  }
</script>

<style scoped>

</style>
